<template>
  <div>
    <input type="number" v-model.number="count" />
  </div>
</template>

<script>
// watchEffect 自动进行数据的监听 -- 初始化会自动执行1次
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(100)

    // 在watchEffect中使用了数据，则它就会进行依赖收集，只要count发生了变化，则它就会触发，而且初始化还会执行1次
    // 它只收集同步代码块中的调用
    // 如果需要在异步中调用，可以提前在同步代码块中调用一次，用来收集
    watchEffect(() => {
      // console.log('watchEffect', count.value)
      // console.log('watchEffect')
      count.value
      new Promise((reslove) => {
        reslove('1')
        // count.value  // 在这里调用一次也可以，它也是同步代码块
      }).then((ret) => {
        // 在此处调用，无法进行依赖收集
        console.log(ret, 'then', count.value)
      })
    })

    return {
      count
    }
  }
}
</script>

<style lang="scss" scoped></style>
